import React, { memo, useEffect, useRef } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { getDjCatelists } from "../store/actionType";
import { Link } from "react-router-dom";
import { DjRadioBannerWrap } from "./style";

export default memo(function DjRadioBanner(props) {
  // (props)
  const abc = useRef();
  const efg = useRef();
  const ulone = useRef();
  const ultwo = useRef();
  const gotoleft = useRef();
  const gotoright = useRef();

  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getDjCatelists());
  }, [dispatch]);

  const { djPlaylists } = useSelector(
    (state) => ({
      djPlaylists: state.getIn(["djPlaylists", "djPlaylists"]),
    }),
    shallowEqual
  );

  const gotoLeft = () => {
    abc.current.className = "dot";
    efg.current.className = "dot z-curr";
    ulone.current.className = "";
    ultwo.current.className = "dspn";
  };
  const gotoRight = () => {
    abc.current.className = "dot z-curr";
    efg.current.className = "dot";
    ulone.current.className = "dspn";
    ultwo.current.className = "";
  };

  function checkIndex(indexp) {
    return indexp.id == props.id;
  }

  if (props.id) {
    document.title = `${
      djPlaylists.categories
        ? djPlaylists.categories.filter(checkIndex)[0].name
        : ""
    } - 主播电台 - 网易云音乐`;
  }

  return (
    <DjRadioBannerWrap>
      <div className="dj-banner">
        <ul ref={ulone}>
          {djPlaylists.length !== 0
            ? djPlaylists.categories.slice(0, 18).map((item, index) => {
                return (
                  <li key={item.id}>
                    <Link
                      to={{
                        pathname: "/discover/djradio/category",
                        search: "?id=" + item.id,
                        query: { id: item.id },
                        state: { id: item.id },
                      }}
                      className={props.id == item.id ? "chooseLi radiobp" : ""}
                    >
                      <div
                        className={
                          props.id == item.id ? "dj-choose-icon" : "dj-icon"
                        }
                        style={{
                          backgroundImage: `url(` + item.picWebUrl + `)`,
                        }}
                      ></div>
                      <em>{item.name}</em>
                    </Link>
                  </li>
                );
              })
            : ""}
          <span
            ref={gotoleft}
            onClick={gotoLeft}
            className="turn radio_slide turn-left"
          >
            向左
          </span>
          <span
            ref={gotoright}
            onClick={gotoRight}
            className="turn radio_slide turn-right"
          >
            向右
          </span>
        </ul>
        <ul ref={ultwo} className="dspn">
          {djPlaylists.length !== 0
            ? djPlaylists.categories.slice(18, 19).map((item, index) => {
                return (
                  <li key={item.id}>
                    <a>
                      <div
                        className={
                          props.id == item.id ? "dj-choose-icon" : "dj-icon"
                        }
                        style={{
                          backgroundImage: `url(` + item.picWebUrl + `)`,
                        }}
                      ></div>
                      <em>{item.name}</em>
                    </a>
                  </li>
                );
              })
            : ""}
          <li>
            <a>
              <div className="dj-icon question"></div>
              <em>常见问题</em>
            </a>
          </li>
          <li>
            <a>
              <div className="dj-icon makezb"></div>
              <em>我要做主播</em>
            </a>
          </li>
          <span
            ref={gotoleft}
            onClick={gotoLeft}
            className="turn radio_slide turn-left"
          >
            向左
          </span>
          <span
            ref={gotoright}
            onClick={gotoRight}
            className="turn radio_slide turn-right"
          >
            向右
          </span>
        </ul>
        <div className="dotpage">
          <span
            ref={efg}
            onClick={gotoLeft}
            className="dot radio_slide z-curr"
          ></span>
          <span
            ref={abc}
            onClick={gotoRight}
            className="dot radio_slide"
          ></span>
        </div>
      </div>
    </DjRadioBannerWrap>
  );
});
